ansi-to-html

What is ansi-to-html?

The ansi-to-html package is designed to convert ANSI code (often used for colorizing text in terminal outputs) into HTML. This is particularly useful for displaying styled console output on web pages.

What are ansi-to-html's main functionalities?

Convert ANSI to HTML

This feature allows you to convert ANSI encoded strings to HTML, preserving the color and style formatting for web display. The code sample demonstrates converting a red 'Hello World' string to HTML.

const Convert = require('ansi-to-html');
const convert = new Convert();
const html = convert.toHtml('\x1b[31mHello World\x1b[0m');

Customize color palette

This feature enables customization of the foreground and background colors used in the conversion process. The code sample shows how to set custom foreground and background colors.

const Convert = require('ansi-to-html');
const convert = new Convert({ fg: '#000', bg: '#fff' });
const html = convert.toHtml('your-ansi-string');

Escape HTML

This feature allows you to ensure that the output HTML is properly escaped. This is useful to avoid XSS attacks when displaying user-generated content. The code sample demonstrates enabling HTML escaping.

const Convert = require('ansi-to-html');
const convert = new Convert({ escapeXML: true });
const html = convert.toHtml('your-ansi-string');

Other packages similar to ansi-to-html

chalk

Chalk is a popular npm package that allows you to style strings in the terminal with colors and styles. Unlike ansi-to-html, Chalk is used for creating styled terminal output rather than converting ANSI codes to HTML.

ansi_up

ansi_up is another npm package that converts ANSI escape codes into HTML. It is similar to ansi-to-html but offers different API options and additional features like converting ANSI cursor movement into HTML.

ansi-colors

ansi-colors is an npm package that focuses on creating ANSI escape sequences for styling strings in the terminal. It is similar to Chalk and does not convert to HTML, but it is lightweight and has no dependencies.

README

Ansi to Html

This was originally a port of the ansi to html converter from bcat to JavaScript. It has since undergone quite a lot of modification.

It has a few additions:

• The API has been altered to accept options in the constructor, and input in toHtml().
• ANSI codes for setting the foreground or background color to default are handled
• the 'erase in line' escape code (\x1b[K) is dropped from the output.

Installation

npm install ansi-to-html

Usage

var Convert = require('ansi-to-html');
var convert = new Convert();

console.log(convert.toHtml('\x1b[30mblack\x1b[37mwhite'));

/*
    prints:
    <span style="color:#000">black<span style="color:#AAA">white</span></span>
*/

Command line usage

When using ansi-to-html from the command line the stream option is set to true. Other options can be provided. See ansi-to-html -h for more detail.

Process a file

ansi-to-html the_filename

From STDIN

git log | ansi-to-html

Options

Options can be be passed to the constructor to customize behaviour.

fg <CSS color values>. The default foreground color used when reset color codes are encountered.

bg <CSS color values>. The default background color used when reset color codes are encountered.

newline true or false. Convert newline characters to <br/>.

escapeXML true or false. Generate HTML/XML entities.

stream true or false. Save style state across invocations of toHtml().

colors Object/Array (with values 0 - 255 containing CSS color values). Can override specific colors or the entire ANSI palette

Default options

{
    fg: '#FFF',
    bg: '#000',
    newline: false,
    escapeXML: false,
    stream: false
}

Development

Once you have the git repository cloned, install the dependencies:

cd ansi-to-html
npm install

Lint

npm run lint

Build

npm run build

• Builds the /src files by running babel.
• Saves the built files in /lib output directory.
• Recommended to run babel in Watch mode - will re-build the project each time the files are changed.

npm run build:watch

Test

npm test

• Note: Runs the tests against the built files (in the /lib directory).
• You also run the tests in watch mode (will rerun tests when files are changed).
• Recommended to run the build in watch mode as well to re-build the project before the tests are run.

npm run test:watch